<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name = "viewport" content = "width = 1280">
<link rel="stylesheet" href="../../style.css" media="screen" />
<link rel="stylesheet" href="../../css/news.css" media="screen" />
<title>News</title>
<script type="text/javascript" src="../../scripts/jquery.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery.ui.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery.roundabout.js"></script>
<script type="text/javascript" src="../../scripts/common.js"></script>
<script type="text/javascript">
$(function(){
	$('ul#myRoundabout').roundabout({
		bearing :  0,
		tilt : 0,
		minScale : 0,
		maxScale :  0,
		minOpacity : -9.0,
		btnNext: '#next',
		btnPrev: '#prev'
	});
	$('li').focus(function() {
		$('#detail').html('').load('/news/detail/'+$(this).attr('id')).fadeIn(200);
	}).blur(function() {
		$('#detail').fadeOut(100);
	});
});
</script>
<style type="text/css">
.slide-pic {
	width:1000px;
	height:450px;
	padding-top:30px;
	position: relative;
	z-index: 1;
}
#myRoundabout {
	margin-left: -230px;
}
.slide-nav {
	margin-top: -50px;
}
div#wrap-footer {
	position: relative;
}
div.content {
    padding: 6em 0 0;
}
</style>
</head>
<body id="news">
<!--$header_html-->
<div id="wrap-container" class="bg-type4">
  <div class="content">
    <div id="news-main">
      <div class="slide-pic">
        <ul id="myRoundabout">
          <!--SiXhEaD:list-->
          <li id="$content_id">$image </li>
          <!--/SiXhEaD:list-->
        </ul>
        <br class="clear" />
      </div>
      <div class="slide-nav"> <a href="#" id="prev">prev</a> <a href="#" id="next">next</a> </div>
      <div id="detail">
        <h3>$title</h3>
        <div class="description">$detail</div>
      </div>
    </div>
  </div>
</div>
<!--$footer_html-->
</body>
</html>